<template>
    <div class="repair">
        <!-- <MyHeader></MyHeader> -->
        <van-form show-error scroll-to-error label-width="27vw" @submit="onSubmit" @failed="onFailed">
            <div class="form-box">
                <!-- <my-title>预约信息</my-title> -->
                <van-field readonly label="预约信息" left-icon="coupon" center />
                <FieldPopupDatePicker
                    :field="formData.sh_dat2"
                    @update:field="updateSh_dat2"
                    name="sh_dat2"
                    label="预约日期"
                    :minDate="new Date()"
                    :readonly="isReadonly"
                />
                <!-- <FieldPopupTimePicker v-model:field="formData.sh_dat3333333" name="sh_dat3333333" label="接运时间" :readonly="isReadonly" /> -->
                <van-field
                    v-if="formData.sh_dat2"
                    v-model="formData.sh_ex45"
                    readonly
                    clickable
                    required
                    center
                    name="sh_ex45"
                    label="预约时间段"
                    placeholder="预约时间段"
                    :rules="[{ required: true, message: '请填写预约时间段' }]"
                    @click="!isReadonly ? (showPicker1 = true) : ''"
                />
                <van-popup v-model:show="showPicker1" position="bottom" round>
                    <div class="appointment-time-quantum">
                        <div class="appointment-time-quantum-tips">
                            提示：请于预约时间提前到达预约地点，因承担全市遗体接运任务，可能会有提前或者延时情况，请于理解！
                        </div>
                        <div v-if="columns1.length == 0" class="appointment-time-quantum-tip2">暂无数据！</div>
                        <div v-else class="appointment-time-quantum-box">
                            <div v-for="(item, index) in columns1" :key="index" class="appointment-time-quantum-item">
                                <van-button
                                    :disabled="item.disabled"
                                    block
                                    plain
                                    native-type="button"
                                    style="height: 100%"
                                    @click="onConfirm(item.time, 'sh_ex45', 'showPicker1')"
                                >
                                    <div class="btntext1">{{ item.time }}</div>
                                    <div>
                                        剩余：{{ item.shengsum }}
                                        <!-- 总量：{{ item.zongsum }} -->
                                    </div>
                                </van-button>
                            </div>
                        </div>
                    </div>
                </van-popup>
                <van-field
                    v-model="formData.sh_ex62"
                    readonly
                    required
                    center
                    type="digit"
                    name="sh_ex62"
                    label="遗体接运车(辆)"
                    placeholder="遗体接运车(辆)"
                    :rules="[{ required: true, message: '请填写遗体接运车(辆)' }]"
                >
                    <template v-if="!isReadonly" #button>
                        <van-stepper v-model="formData.sh_ex62" integer min="1" />
                    </template>
                </van-field>
                <van-field
                    v-model="formData.sh_ex63"
                    readonly
                    required
                    center
                    type="digit"
                    name="sh_ex63"
                    label="配送车(辆)"
                    placeholder="配送车(辆)"
                    :rules="[{ required: true, message: '请填写配送车(辆)' }]"
                >
                    <template v-if="!isReadonly" #button>
                        <van-stepper v-model="formData.sh_ex63" :disabled="isReadonly" integer min="0" />
                    </template>
                </van-field>
            </div>
            <div class="form-box">
                <van-field readonly label="逝者信息" left-icon="manager" center />
                <!-- <my-title>逝者信息</my-title> -->
                <van-field
                    v-model="formData.sh_ex1"
                    :readonly="isReadonly"
                    required
                    center
                    name="sh_ex1"
                    label="逝者姓名"
                    placeholder="逝者姓名"
                    :rules="[{ required: true, message: '请填写逝者姓名' }]"
                >
                    <template v-if="!isReadonly" #button>
                        <van-uploader
                            v-model="dataArr.sh_ex36"
                            :readonly="isReadonly"
                            :preview-image="false"
                            :before-delete="beforeDelete('sh_ex36')"
                            :before-read="beforeRead"
                            :after-read="afterRead('sh_ex36', true)"
                        >
                            <van-button size="small" icon="plus" type="primary" native-type="button">
                                拍照识别
                            </van-button>
                        </van-uploader>
                    </template>
                </van-field>

                <van-field
                    v-model="formData.sh_ex2"
                    :readonly="isReadonly"
                    required
                    center
                    name="sh_ex2"
                    label="逝者身份证"
                    placeholder="逝者身份证"
                    :rules="[
                        { required: true, message: '请填写逝者身份证' },
                        {
                            validator: validator1('sh_ex3', 'sh_ex4'),
                            message: '请填写正确的逝者身份证',
                        },
                    ]"
                />
                <van-field
                    v-model="formData.sh_ex3"
                    required
                    readonly
                    center
                    name="sh_ex3"
                    label="逝者性别"
                    placeholder="逝者性别"
                />
                <van-field
                    v-model="formData.sh_ex4"
                    type="digit"
                    required
                    readonly
                    center
                    name="sh_ex4"
                    label="逝者年龄"
                    placeholder="逝者年龄"
                />
                <FieldPopupDatePicker
                    v-model:field="formData.sh_dat4"
                    name="sh_dat4"
                    label="死亡日期"
                    :maxDate="new Date()"
                    :readonly="isReadonly"
                />
                <van-field
                    v-model="formData.sh_ex31"
                    :readonly="isReadonly"
                    required
                    center
                    name="sh_ex31"
                    label="生前居住地"
                    placeholder="生前居住地"
                    :rules="[{ required: true, message: '请填写生前居住地' }]"
                />
                <van-field
                    required
                    readonly
                    center
                    name="sh_ex36"
                    label="逝者身份证"
                    :rules="[{ validator: validator2('sh_ex36'), message: '请上传逝者身份证' }]"
                />
                <div class="uploader-box">
                    <van-uploader
                        v-model="dataArr.sh_ex36"
                        :readonly="isReadonly"
                        :max-count="1"
                        upload-text="逝者身份证"
                        :before-delete="beforeDelete('sh_ex36')"
                        :before-read="beforeRead"
                        :after-read="afterRead('sh_ex36')"
                        :deletable="!isReadonly"
                    >
                        <template #default>
                            <img src="@/assets/img/uploader/uploader.png" />
                        </template>
                    </van-uploader>
                </div>
            </div>

            <div class="form-box">
                <van-field readonly label="承办人信息" left-icon="manager" center />
                <!-- <my-title>丧事承办人信息</my-title> -->
                <van-field
                    v-model="formData.sh_ex5"
                    :readonly="isReadonly"
                    required
                    center
                    name="sh_ex5"
                    label="承办人姓名"
                    placeholder="承办人姓名"
                    :rules="[{ required: true, message: '请填写承办人姓名' }]"
                >
                    <template v-if="!isReadonly" #button>
                        <van-uploader
                            v-model="dataArr.sh_ex37"
                            :readonly="isReadonly"
                            :preview-image="false"
                            :before-delete="beforeDelete('sh_ex37')"
                            :before-read="beforeRead"
                            :after-read="afterRead('sh_ex37', true)"
                        >
                            <van-button size="small" icon="plus" type="primary" native-type="button">
                                拍照识别
                            </van-button>
                        </van-uploader>
                    </template>
                </van-field>

                <van-field
                    v-model="formData.sh_ex35"
                    :readonly="isReadonly"
                    required
                    center
                    name="sh_ex35"
                    label="承办人身份证"
                    placeholder="承办人身份证"
                    :rules="[
                        { required: true, message: '请填写承办人身份证' },
                        {
                            validator: validator1('sh_ex55', 'sh_ex56'),
                            message: '请填写正确的承办人身份证',
                        },
                    ]"
                />
                <van-field
                    v-model="formData.sh_ex55"
                    required
                    readonly
                    center
                    name="sh_ex55"
                    label="承办人性别"
                    placeholder="承办人性别"
                />
                <van-field
                    v-model="formData.sh_ex56"
                    type="digit"
                    required
                    readonly
                    center
                    name="sh_ex56"
                    label="承办人年龄"
                    placeholder="承办人年龄"
                />
                <van-field
                    v-model="formData.sh_ex57"
                    :readonly="isReadonly"
                    required
                    center
                    name="sh_ex57"
                    label="与逝者关系"
                    placeholder="与逝者关系"
                    :rules="[{ required: true, message: '请填写与逝者关系' }]"
                />
                <van-field
                    v-model="formData.sh_ex58"
                    :readonly="isReadonly"
                    required
                    center
                    name="sh_ex58"
                    label="承办人地址"
                    placeholder="承办人地址"
                    :rules="[{ required: true, message: '请填写承办人地址' }]"
                />
                <van-field
                    v-model="formData.sh_ex6"
                    :readonly="isReadonly"
                    required
                    center
                    type="number"
                    maxlength="11"
                    name="sh_ex6"
                    label="承办人电话"
                    placeholder="承办人电话"
                    :rules="[
                        { required: true, message: '请填写承办人电话' },
                        { validator: isPhone, message: '请填写正确的承办人电话' },
                    ]"
                />
                <van-field
                    required
                    readonly
                    center
                    name="sh_ex37"
                    label="承办人身份证"
                    :rules="[{ validator: validator2('sh_ex37'), message: '请上传承办人身份证' }]"
                />
                <div class="uploader-box">
                    <van-uploader
                        v-model="dataArr.sh_ex37"
                        :readonly="isReadonly"
                        :max-count="1"
                        upload-text="承办人身份证"
                        :before-delete="beforeDelete('sh_ex37')"
                        :before-read="beforeRead"
                        :after-read="afterRead('sh_ex37')"
                        :deletable="!isReadonly"
                    >
                        <template #default>
                            <img src="@/assets/img/uploader/uploader.png" />
                        </template>
                    </van-uploader>
                </div>
                <FieldPopupEsign v-model="formData.sh_ex49" :readonly="isReadonly" />
            </div>
            <div class="form-box">
                <van-field readonly label="承办人信息" left-icon="location" center />
                <!-- <my-title>位置信息</my-title> -->
                <van-field
                    v-model="formData.sh_ex59"
                    :readonly="isReadonly"
                    required
                    center
                    name="sh_ex59"
                    label="遗体灵枢位置"
                    placeholder="遗体灵枢位置"
                    :rules="[{ required: true, message: '请填写遗体灵枢位置' }]"
                />
            </div>
            <div class="form-box">
                <van-field readonly label="服务诉求" left-icon="column" center />
                <!-- <my-title>服务诉求</my-title> -->
                <van-field
                    v-model="formData.sh_ex60"
                    :readonly="isReadonly"
                    type="textarea"
                    rows="1"
                    autosize
                    required
                    center
                    name="sh_ex60"
                    label="服务诉求"
                    placeholder="服务诉求"
                    :rules="[{ required: true, message: '请填写服务诉求' }]"
                />
            </div>

            <div id="container"></div>
            <div id="mapDiv"></div>

            <FixedButton v-if="!isReadonly" native-type="submit">提交</FixedButton>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, watch } from 'vue';
    import type { Ref, Raw } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { useStore, useMsgStore } from '@/store';
    // import { showDialog, showLoadingToast, closeToast, showFailToast } from 'vant';//使用显示导入需要导入样式
    import MyHeader from '@/components/myHeader/MyHeader.vue';
    import FixedButton from '@/components/fixedButton/FixedButton.vue';
    import FieldPopupPicker from '@/components/fieldPopupPicker/FieldPopupPicker.vue';
    import FieldPopupDatePicker from '@/components/fieldPopupDatePicker/FieldPopupDatePicker.vue';
    import FieldPopupTimePicker from '@/components/fieldPopupTimePicker/FieldPopupTimePicker.vue';
    import FieldPopupEsign from '@/components/fieldPopupEsign/FieldPopupEsign.vue';
    import { saveReserveInfoApi, fileUploadBase64Ex, idOrc, getRecordDetailsApi, querytimesApi } from '@/apis';
    import { isPhone, compressImg, isCardID, getSex, getAge } from '@/utils';

    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const msgStore = useMsgStore();
    const isReadonly: boolean = route.query?.sh_id ? true : false;
    const formData: Ref<any> = ref({
        sh_ex1: '',
        sh_ex6: '',
        sh_ex2: '',
        sh_ex3: '',
        sh_ex4: '',
        sh_ex5: '',
        sh_ex28: '火化', // 接运，守灵，告别
        sh_ex35: '',
        sh_ex36: '',
        sh_ex37: '',
        sh_dat2: '',
        sh_dat4: '',
        sh_ex45: '',
        sh_ex47: store.openid,
        sh_ex49: '',
        sh_ex31: '',
        sh_ex55: '',
        sh_ex56: '',
        sh_ex57: '',
        sh_ex58: '',
        sh_ex59: '',
        sh_ex60: '',
        sh_ex61: '',
        sh_ex62: '',
        sh_ex63: '',
        sh_mainid: 0,
    });

    const dataArr = reactive({
        sh_ex36: [], //逝者身份证
        sh_ex37: [], //承办人身份证
    });
    const showPicker1: Ref<boolean> = ref(false);
    const myShowPick = reactive({
        showPicker1,
    });
    const columns1: Ref<
        {
            shengsum?: string;
            zongsum?: string;
            time?: string;
            disabled?: boolean;
        }[]
    > = ref([]);

    onBeforeMount(async () => {
        // 不小心退出或者有电话打进来后退出；然后重新进就要完全重新添加；希望下次进的时候数据能保留
        if (msgStore.cremationAppointmentMsg && Object.keys(msgStore.cremationAppointmentMsg).length > 0) {
            formData.value = msgStore.cremationAppointmentMsg;
            Object.keys(dataArr).forEach((item: any, index: number) => {
                if (formData.value[item]) {
                    dataArr[item] = [
                        {
                            url: formData.value[item],
                            isImage: true,
                        },
                    ];
                }
            });
        }
        if (isReadonly) {
            console.log('...........');
            // 获取数据
            getRecordDetailsApi({
                sh_id: route.query.sh_id,
            }).then((res) => {
                formData.value = res.data[0];
                // if (formData.value.sh_ex36) {
                //     dataArr.sh_ex36 = [{
                //         url: formData.value.sh_ex36,
                //         isImage: true
                //     }]
                // }
                // if (formData.value.sh_ex37) {
                //     dataArr.sh_ex37 = [{
                //         url: formData.value.sh_ex37,
                //         isImage: true
                //     }]
                // }
                Object.keys(dataArr).forEach((item: any, index: number) => {
                    if (formData.value[item]) {
                        dataArr[item] = [
                            {
                                url: formData.value[item],
                                isImage: true,
                            },
                        ];
                    }
                });
            });
        } else {
        }
    });
    const handlePagehide = () => {
        console.log('handlePagehide');
        if (isSubmit.value) {
            msgStore.cremationAppointmentMsg = {};
        } else {
            msgStore.cremationAppointmentMsg = formData.value;
        }
    };
    onMounted(() => {
        window.addEventListener('pagehide', handlePagehide);

        let map;
        let zoom = 12;
        let T = window.T;
        //初始化地图对象
        map = new T.Map('mapDiv');
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(116.40969, 38.89945), zoom);
        var lo = new T.Geolocation();

        let fn = function (e) {
            console.log(this.getStatus());
            console.log(e.lnglat);
            console.log(e);
            // alert(this.getStatus())
            if (this.getStatus() == 0) {
                // alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
                console.log('获取定位坐标：' + e.lnglat.lat + ',' + e.lnglat.lng);
                //详细地址，逆地理编码
                let geocoder = new T.Geocoder();
                geocoder.getLocation(e.lnglat, searchResult);
            }
            if (this.getStatus() == 1) {
                // alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
                console.log('获取定位坐标：' + e.lnglat.lat + ',' + e.lnglat.lng);
                //详细地址，逆地理编码
                let geocoder = new T.Geocoder();
                geocoder.getLocation(e.lnglat, searchResult);
            }
        };
        lo.getCurrentPosition(fn);
        //详细地址的回调函数
        function searchResult(result) {
            if (result.getStatus() == 0) {
                // self.address = result.getAddress();
                formData.value.sh_ex61 = result.getAddress();
                //alert(result.getAddress());
                console.log('定位3成功信息：', result.getAddress());
            } else {
                // alert(result.getMsg());
                console.log(result.getMsg());
            }
        }
    });

    const updateSh_dat2 = (val) => {
        console.log(val);
        formData.value.sh_dat2 = val;
        columns1.value = [];
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0,
        });
        // 接口
        querytimesApi({
            szy_dat1: formData.value.sh_dat2,
        })
            .then((res) => {
                res.data.forEach((el) => {
                    if (Number(el.shengsum <= 0)) {
                        el.disabled = true;
                    }
                    columns1.value.push(el);
                });
                // columns1.value = res.data
                console.log(res);
            })
            .catch((err) => {})
            .finally(() => {
                closeToast();
            });
    };
    const onConfirm = (val, field, isShow) => {
        formData.value[field] = val;
        // showPicker1.value = false
        myShowPick[isShow] = false;
    };
    // 校验函数返回 true 表示校验通过，false 表示不通过
    // const validator = val => {
    //     if (isCardID(val)) {
    //         return false
    //     } else {
    //         // 逝者性别
    //         formData.value['sh_ex3'] = getSex(val)
    //         // 逝者年龄
    //         formData.value['sh_ex4'] = getAge(val)
    //         return true
    //     }
    // }
    const validator1 = (field1, field2) => {
        return (val) => {
            if (isCardID(val)) {
                return false;
            } else {
                // 逝者性别
                formData.value[field1] = getSex(val);
                // 逝者年龄
                formData.value[field2] = getAge(val);
                return true;
            }
        };
    };
    // 照片数组验证
    const validator2 = (field) => {
        return (val) => {
            console.log(val);
            console.log(field);
            if (dataArr[field].length == 0 || !formData.value[field]) {
                return false;
            } else {
                return true;
            }
        };
    };
    // 校验函数返回 true 表示校验通过，false 表示不通过
    // const validator3 = (val) => {
    //     if (isCardID(val)) {
    //         return false
    //     } else {
    //         return true
    //     }
    // }
    const beforeDelete = (data) => {
        return (file, detail) => {
            let arr = formData.value[data].split(',');
            arr.splice(detail.index, 1);
            formData.value[data] = arr.join(',');
            return true;
        };
    };
    const beforeRead = (file) => {
        console.log(file);
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
            showFailToast('请上传 jpg/png 格式图片');
            return false;
        }
        return true;
    };
    const afterRead = (imgField, isIdOrc = false) => {
        return (file) => {
            file.status = 'uploading';
            file.message = '上传中...';
            // 执行压缩图片并上传
            let obj = new compressImg(file, afterRead2, imgField, isIdOrc, file);
            // console.log(obj)
            // console.log(obj.getMyf())
            // console.log(obj.getMyfb())
            // console.log(obj.myf)
            // console.log(obj.myfb)
        };
    };
    // 组件方法 获取 流
    const afterRead2 = (imgField, isIdOrc, file, obj) => {
        // failed done
        // file.status = 'uploading';
        // file.message = '上传中...';
        // file.file: 文件 file.content: base64图片
        console.log(file);
        // let f = new FormData()
        // f.append('file', file.file)
        fileUploadBase64Ex({
            data: obj,
            sCode: 'kmxbyg',
        })
            .then((res) => {
                // file.status = 'done';
                // file.message = '上传完成';
                console.log(res);

                if (imgField == 'sh_ex36' || imgField == 'sh_ex37') {
                    // 拍照识按钮要显示不能设置maxCount=1，不然上传一张图就没了按钮
                    if (dataArr[imgField].length > 1) {
                        dataArr[imgField].shift();
                    }
                    formData.value[imgField] = res[0].url;
                    // 用过拍照识别后续上传身份证都要进行idOrc验证信息
                    if (isIdOrc) {
                        idOrc({
                            img: obj,
                        })
                            .then((res) => {
                                if (res.idcard_number_type == 1) {
                                    let obj = res.words_result;

                                    if (imgField == 'sh_ex36') {
                                        formData.value.sh_ex1 = obj['姓名'].words;
                                        formData.value.sh_ex2 = obj['公民身份号码'].words;
                                        validator1('sh_ex3', 'sh_ex4')(obj['公民身份号码'].words);
                                        // formData.value.sh_ex3 = obj['性别'].words
                                    } else if (imgField == 'sh_ex37') {
                                        formData.value.sh_ex5 = obj['姓名'].words;
                                        formData.value.sh_ex35 = obj['公民身份号码'].words;
                                        validator1('sh_ex55', 'sh_ex56')(obj['公民身份号码'].words);
                                    }
                                } else {
                                    throw new Error('身份证验证失败');
                                }
                                file.status = 'done';
                                file.message = '上传完成';
                            })
                            .catch((err) => {
                                console.log(err);
                                showFailToast('识别失败');
                                file.status = 'done';
                                file.message = '上传完成';
                            });
                    } else {
                        file.status = 'done';
                        file.message = '上传完成';
                    }
                } else {
                    // formData.value[imgField] = res[0].url
                    if (formData.value[imgField]) {
                        formData.value[imgField] = formData.value[imgField].concat(',', res[0].url);
                    } else {
                        formData.value[imgField] = formData.value[imgField].concat(res[0].url);
                    }
                    file.status = 'done';
                    file.message = '上传完成';
                }
            })
            .catch((err) => {
                file.status = 'failed';
                file.message = '上传失败';
                console.log(dataArr[imgField]);
                dataArr[imgField].pop();
                showFailToast('上传失败');
                console.log(err);
            });
    };

    const onFailed = (value) => {
        showDialog({
            teleport: '.repair',
            title: '提示',
            message: value.errors[0].message,
        });
    };
    const isSubmit: Ref<boolean> = ref(false); //是否成功提交
    const onSubmit = async (value) => {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0,
        });

        let mydata = JSON.parse(JSON.stringify(formData.value));
        mydata.sh_dat2 = formData.value.sh_dat2 + ' ' + formData.value.sh_ex45;
        saveReserveInfoApi({
            data: JSON.stringify(mydata),
        })
            .then((res) => {
                closeToast();
                if (res[0].status == '+OK') {
                    showDialog({
                        teleport: '.repair',
                        title: '提示',
                        message: res[0].msg,
                    }).then(() => {
                        isSubmit.value = true;
                        router.push('/');
                    });
                } else {
                    showDialog({
                        teleport: '.repair',
                        title: '提示',
                        message: res[0].msg,
                    });
                }
            })
            .catch((err) => {
                closeToast();
                showDialog({
                    teleport: '.repair',
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                });
            });
    };
    onBeforeUnmount(() => {
        console.log('onBeforeUnmount');
        handlePagehide();
        window.removeEventListener('pagehide', handlePagehide);
    });
</script>
<style lang="scss" scoped>
    .repair {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-image: url('@/assets/img/bg/bg10.png');
        background-size: 100% 100%;
    }
    :deep(.van-form) {
        // height: 550px;
        // height: 510px;
        flex: 1;
        overflow: scroll;
        box-sizing: border-box;
        padding: 5px;
    }
    .form-box {
        border-radius: 10px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 4px;
        margin: 10px 0;
    }
    .uploader-box {
        border-bottom: 1px solid #999999;
        margin: 6px 15px;
        box-sizing: border-box;
        padding: 0px 0;
        height: 180px;
        overflow: hidden;
        img {
            // width: 345px;
            width: 325px;
            height: 180px;
        }
        // 上传图片后图片大小
        :deep(.van-uploader__preview-image) {
            // width: 345px;
            width: 325px;
            height: 180px;
        }
    }
    .uploader-box-2 {
        img {
            width: 80px;
            height: 80px;
        }
    }
    .appointment-time-quantum {
        height: 300px;
        overflow: scroll;
        @include padding-global;
        padding-top: 20px;
        padding-bottom: 20px;
        .appointment-time-quantum-tips {
            font-size: 14px;
            color: red;
            text-align: left;
        }
        .appointment-time-quantum-tip2 {
            padding-top: 10px;
        }
        .appointment-time-quantum-box {
            padding-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .appointment-time-quantum-item {
            margin-top: 10px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 150px;
            border: 1px solid rgb(111, 185, 235);
            font-size: 14px;
        }
    }
    #container,
    #mapDiv {
        width: 0%;
        height: 0%;
    }
    // dialog弹框ui
    :deep(.van-popup.van-popup--center.van-dialog) {
        background-color: none;
        background-image: url('@/assets/img/bg/bg10.png');
        background-size: 100% 100%;
    }
    :deep(.van-hairline--top.van-dialog__footer button) {
        background: none;
    }
</style>
